<template>
  <section class="section features">
    <div class="container">
      <h2 class="section-title">炫酷特性</h2>
      <div class="features-grid">
        <div v-for="(card, index) in featureCards" 
             :key="index" 
             class="feature-card">
          <div class="feature-icon">{{ card.icon }}</div>
          <h3>{{ card.title }}</h3>
          <p>{{ card.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const featureCards = ref([
  { icon: '🎨', title: '流畅动画', desc: '使用 GSAP 实现流畅的动画效果' },
  { icon: '🌊', title: '3D 效果', desc: '基于 Three.js 的沉浸式 3D 体验' },
  { icon: '⚡', title: '响应式设计', desc: '完美适配各种设备尺寸' },
  { icon: '🎯', title: '性能优化', desc: '优化的代码和资源加载策略' },
  { icon: '🔮', title: '现代技术', desc: '使用最新的前端技术栈' },
  { icon: '🎪', title: '交互体验', desc: '精心设计的用户交互效果' }
])

onMounted(() => {
  // 设置初始状态
  gsap.set('.feature-card', {
    opacity: 1,
    y: 0
  })

  // 标题动画
  gsap.from('.section-title', {
    scrollTrigger: {
      trigger: '.section-title',
      start: 'top 80%',
      end: 'bottom 20%',
      toggleActions: 'play none none reverse',
      once: true
    },
    duration: 1,
    y: 50,
    opacity: 0,
    ease: 'power4.out'
  })

  // 卡片动画
  const cards = document.querySelectorAll('.feature-card')
  cards.forEach((card, index) => {
    gsap.from(card, {
      scrollTrigger: {
        trigger: card,
        start: 'top 85%',
        end: 'bottom 15%',
        toggleActions: 'play none none reverse',
        once: true
      },
      duration: 0.8,
      y: 100,
      opacity: 0,
      delay: index * 0.1,
      ease: 'power4.out'
    })
  })
})
</script>

<style scoped>
.features {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, 
    rgba(10, 10, 10, 0.95) 0%,
    rgba(0, 40, 60, 0.95) 50%,
    rgba(10, 10, 10, 0.95) 100%
  );
  min-height: calc(100vh - 60px - 60px); /* 减去导航栏高度和页脚高度 */
  display: flex;
  align-items: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 4rem;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card p {
  color: var(--text-color);
  opacity: 0.8;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .features {
    padding: 4rem 1rem;
    min-height: calc(100vh - 50px - 60px); /* 移动端导航栏高度较小 */
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style> 